<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../common.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Application List</title>
	<link href="${ctx}/resources/css/bootstrap/dashboard.css" rel="stylesheet">
	<link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<script type="text/javascript" src="${ctx}/resources/js/highcharts/jquery-1.8.2.min.js"></script>
	<script src="${ctx}/resources/js/monitor/xl-monitor.js"></script>
	<style type="text/css">
		${demo.css}
		.col-sm-3{
			width : 33%;
		}

	</style>

</head>
<body style="padding-top:0px;">
	<h2 class="sub-header" style="border-bottom:#FFFFFF"><i class="fa fa-cubes"> Pod 列表</i></h2>
	<div class="table-responsive">
	<table class="table table-striped table-hover">
		<thead>
		<tr>
			<th>#序号</th>
			<th>Name</th>
			<th>Labels</th>
			<th>Nodes</th>
			<th>Namespaces</th>			
			<th>HostIp</th>
			<th>PodIp</th>
			<th>Status</th>
			<th>StartTime</th>
		</tr>
		</thead>
		<tbody>
		<c:forEach items="${pods.items}" var="pod" varStatus="podStatus">
			<tr>
				<td>${podStatus.index + 1}</td>
				<td><span class="glyphicon glyphicon-sort-by-attributes">${pod.metadata.name}</span></td>
				<td>${pod.metadata.labels}</td>
				<td>${pod.spec.nodeName}&nbsp;</td>
				<td>${pod.metadata.namespace}&nbsp;</td>		
				<td>${pod.status.hostIP}&nbsp;</td>
				<td>${pod.status.podIP}&nbsp;</td>
				<c:choose>
					<c:when test="${pod.status.phase=='Running'}">
						<td><span class="label label-info">${pod.status.phase}&nbsp;</span></td>
					</c:when>
					<c:otherwise>
						<td><span class="label label-info">${pod.status.phase}&nbsp;</span></td>
					</c:otherwise>
				</c:choose>
				<td>${pod.status.startTime}&nbsp;</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>            
	</div>
</body>
</html>
